<template>
  <view class="container">
    <view class="nav-bar">
      <view class="left title-card">
        <text class="title">脑卒中风险沟通</text>
      </view>
    </view>
	
	<view class="banner">
	  <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" interval="5000">
		<swiper-item v-for="(item, index) in bannerList" :key="index">
		  <image :src="item.image" mode="aspectFill" class="banner-image" @click="handleBannerClick(item)"></image>
		</swiper-item>
	  </swiper>
	</view>

    <text class="nav-title">知晓卒中；预防发生/复发</text>

    <view class="fan-chart">
      <canvas canvas-id="fanCanvas" id="fanCanvas" class="fan-canvas" @touchend="onCanvasClick"></canvas>
    </view>

    <custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
  </view>                     
</template>

<script>
// import tabBarMixin from '@/common/mixins/tab-bar-mixin.js';

export default {
 // mixins: [tabBarMixin],
  
  data() {
    return {
		showCustomTabBar: true,
      bannerList: [
        { image: '/static/banner/banner1.png', url: '/pages/article/detail?id=1' },
        { image: '/static/banner/banner2.png', url: '/pages/article/detail?id=2' }
      ],
      fanChartInfo: {
        centerX: 150,
        centerY: 150,
        radius: 150,
        gapAngle: Math.PI / 60,
        labels: ['健康指导', '健康指标', '风险评估', '风险报告'],
        pages: ['/pages/health/course', '/pages/my/healthIndicator', '/pages/assessment/risk-assessent', '/pages/assessment/risk-report']
      }
    };
  },
  onReady() {
    this.drawFanChart();
  },
  onLoad() {
	    uni.$on('page-show', () => {
	      if (!this.shouldUpdate) return;
	      this.updateTabBar();
	    });
  	//uni.$emit('page-show'); 
  },
  methods: {
    handleBannerClick(item) {
      uni.navigateTo({ url: item.url });
    },
    drawFanChart() {
      const ctx = uni.createCanvasContext('fanCanvas', this);
      const { centerX, centerY, radius, gapAngle, labels } = this.fanChartInfo;
      const colors = ['#c1d9c5', '#f1e9b6', '#d8bee3', '#aedde6'];
      const segmentCount = 4;
      const fullAngle = 2 * Math.PI;
      const segmentAngle = (fullAngle / segmentCount) - gapAngle;

      for (let i = 0; i < segmentCount; i++) {
        const angleStart = i * (segmentAngle + gapAngle);
        const angleEnd = angleStart + segmentAngle;

        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, angleStart, angleEnd);
        ctx.closePath();

        ctx.setShadow(4, 4, 8, 'rgba(0,0,0,0.1)');
        ctx.setFillStyle(colors[i]);
        ctx.fill();

        const textAngle = angleStart + segmentAngle / 2;
        const textRadius = radius - 55;
        const textX = centerX + textRadius * Math.cos(textAngle);
        const textY = centerY + textRadius * Math.sin(textAngle);

        ctx.setShadow(0, 0, 0, 'transparent');
        ctx.setFillStyle('#555');
        ctx.setFontSize(18);
        ctx.setTextAlign('center');
        ctx.setTextBaseline('middle');
        ctx.fillText(labels[i], textX, textY);
      }

      ctx.beginPath();
      ctx.arc(centerX, centerY, 65, 0, 2 * Math.PI);
      ctx.setShadow(4, 4, 8, 'rgba(0,0,0,0.15)');
      ctx.setFillStyle('#dbeef7');
      ctx.fill();

      ctx.setShadow(0, 0, 0, 'transparent');
      ctx.setFillStyle('#333');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.setTextBaseline('middle');
      ctx.fillText('脑卒中复发', centerX, centerY - 10);
      ctx.fillText('风险沟通', centerX, centerY + 14);

      ctx.draw();
    },
    
    // 添加点击处理事件
onCanvasClick(e) {
  const touch = e.changedTouches[0];

  uni.createSelectorQuery()
    .in(this)
    .select('#fanCanvas')
    .boundingClientRect(rect => {
      const x = touch.x;
      const y = touch.y;

      let url=';'
      if(x > 0 && x < 150 && y > 0 && y < 150){
		  url = '/pages/assessment/risk-assessment'
	  }else if(x > 150 && x < 300 && y > 0 && y < 150){
		  url = '/pages/assessment/risk-report'//url = '/pages/my/healthIndicator'
	  }else if(x > 0 && x < 150 && y > 150 && y < 300){
		  url = '/pages/my/healthIndicator'
	  }else{
		  url = '/pages/health/course'
	  }
/*      const centerX = rect.width / 2;
      const centerY = rect.height / 2 - 60;

      const dx = x - centerX;
      const dy = y - centerY;

      let angle = Math.atan2(dy, dx); // [-π, π]
      if (angle < 0) angle += 2 * Math.PI; // 转为 [0, 2π]

      // 顺时针划分四个区域
      let index = -1;
      if (angle >= 0 && angle < Math.PI / 2) {
        index = 0; // 右上
      } else if (angle >= Math.PI / 2 && angle < Math.PI) {
        index = 1; // 右下
      } else if (angle >= Math.PI && angle < 3 * Math.PI / 2) {
        index = 2; // 左下
      } else {
        index = 3; // 左上
      }

      // 提示和跳转
      const label = this.fanChartInfo.labels[index];
      const page = this.fanChartInfo.pages[index];

      uni.showToast({
        title: `点击了：${label}（index=${index}） x:${touch.y}`,
        icon: 'none'
      });*/

        setTimeout(() => {
          uni.navigateTo({ url });
        }, 300);
    })
    .exec();
}

  }
};
</script>

<style lang="scss">
.container {
  .nav-bar {
    background-color: transparent; // 保持原来样式，如果你有
    padding: 20rpx 20rpx 10rpx 20rpx;
    .left {
      /* 移除你之前可能写的样式，改用卡片背景 */
    }
  }

  .title-card {
    background-color: #e6f0fa;
    padding: 10rpx 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
    display: inline-block;
  }

  .title {
    font-size: 32rpx;    /* 放大点 */
    color: #3b4a72;
    font-weight: 700;
  }

  .banner {
    margin: 20rpx 0;
    .swiper {
      height: 420rpx; /* 放大轮播图高度 */
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 6rpx 14rpx rgba(0, 0, 0, 0.1);
    }
    .banner-image {
      width: 100%;
      height: 220rpx;
      border-radius: 12rpx;
    }
  }

  .nav-title {
    text-align: center;
    font-size: 35rpx;
    color: #666;
    background-color: #f0f4fb;
    margin: 10rpx auto 20rpx auto;
    padding: 6rpx 20rpx;
    border-radius: 16rpx;
    display: inline-block;
    box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.05);
  }

  .fan-chart {
    width: 300px;
    height: 300px;
    margin: 20rpx auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fan-canvas {
    width: 300px;
    height: 300px;
  }
}
</style>
